<template>
  <div class="my">
    <div class="top">
      <ul class="my-top-ul">
        <li>
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            round
            :src="$root.userInfo.avatar || require('@/views/img/p1.jpg')"
          />
        </li>
        <li>
          <router-link to="/login"
            ><span>{{ $root.userInfo.nickname || "请登录" }}</span></router-link
          >
        </li>
        <li>
          <button><router-link to="/user">编辑资料</router-link></button>
        </li>
      </ul>
      <!-- <ul class="top-ul">
                <li><span>1</span><span>头条</span></li>
                <li><span>1</span><span>点赞</span></li>
            </ul> -->
    </div>
    <ul class="top-ul2">
      <li>
        <router-link to="/collect">
          <span>
            <svg class="tt-icon" aria-hidden="true">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
          </span>
          <span @click="getidcollect">收藏</span>
        </router-link>
      </li>
      <li>
        <router-link to="/IRelease">
          <span>
            <!-- <svg class="tt-icon" aria-hidden="true">
              <use xlink:href="#icon-wodefabu"></use>
            </svg> -->
            <img src="./img/发布.png" alt="">
          </span>
          <span>发布</span>
        </router-link>
      </li>
      <li>
          <router-link to="/history">
        <span>
          <svg class="tt-icon" aria-hidden="true">
            <use xlink:href="#icon-lishi"></use>
          </svg>
        </span>
        <span>历史</span>
         </router-link>
      </li>
    </ul>
    <div class="bot">
      <p><router-link to="/change">修改密码 </router-link></p>
      <p><router-link to="/contact">联系我们 </router-link></p>
      <p><router-link to="/about">关于我们 </router-link></p>
    </div>
    <button v-if="$root.userInfo.token" class="button" @click="logout">
      退出登陆
    </button>
    <button v-else class="button">
      <router-link to="/login">去登录</router-link>
    </button>
  </div>
</template>

<script>
import { Uploader } from "vant";
import { Image as VanImage } from "vant";
import { Dialog } from "vant";
export default {
  name: "WorkspaceJsonMy",
  components: {
    [Uploader.name]: Uploader,
    [VanImage.name]: VanImage,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},

  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "是否退出登录",
        })
        .then((res) => {
          console.log(res);
          localStorage.removeItem("token");
          localStorage.removeItem("uid");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("tokenExpired");

          this.$root.userInfo = {};
          this.$root.token = "";
          this.$root.uid = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 收藏列表
    getidcollect() {
      this.user_id = localStorage.getItem("uid");
      this.$http
        .post("/api/get_fav_list", {
          user_id: this.user_id,
          skip: "0",
          limit: "10",
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  height: 100vh;
  background-color: #eaeaea;
  // font-family: nomal;
}
.top {
  background-color: #fff;
  background: url("./img/郁金香.png") no-repeat;
  background-size: 392px;
  height: 200px;
  .my-top-ul {
    padding: 0 15px;
    padding-top: 10vw;
    display: flex;
    li:nth-child(1) {
      width: 80px;
      img {
        width: 100%;
      }
    }
    li:nth-child(2) {
      span {
        display: block;
        margin-top: 15px;
      }
      flex: 1;
    }
    li {
      button {
        margin-top: 15px;
        border-radius: 36px;
        background-color: #eee;
        border: 1px solid #ccc;
        padding: 0 5px;
        color: rgb(89, 89, 89);
        font-size: 13px;
      }
    }
  }
  .top-ul {
    display: flex;
    color: #fff;
    li {
      padding-top: 40px;
      width: 49%;
      text-align: center;
      span {
        display: block;
        margin-bottom: 3px;
        .tt-icon {
        //   color: pink;
          font-size: 32px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
.top-ul2 {
  background-color: #fff;
  display: flex;
  li {
    padding-top: 20px;
    width: 49%;
    text-align: center;
    span {
      display: block;
      margin-bottom: 3px;
      .tt-icon {
        // color: pink;
        font-size: 32px;
        margin-bottom: 1.8vw;
      }
      img{
        // color: pink;
        margin-top: -0.6667vw;
        width: 36px;
        height: 36px;
      }
    }
  }
}
.bot {
  margin-top: 6px;
  background-color: #fff;
  padding: 0 0 0px 15px;
  p {
    border-bottom: 1px solid #ccc;
    height: 41px;
    line-height: 41px;
    font-family: none;
    font-size: 20px;
  }
  a {
    font-weight: normal;
  }
}
.button {
  margin-top: 10px;
  width: 100%;
  height: 45px;
  border: none;
  background-color: #fff;
  color: red;
}
</style>